<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> Slider with Animated Blocks | RoyalSlider</title>
<link href="royalslider.css" rel="stylesheet">
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery.royalslider.min.js"></script>
<script src="jquery.easing-1.3.js"></script>
<link href="rs-minimal-white.css?v=1.0.4" rel="stylesheet">
<style>
#royasliderbox{ width:66%; margin:0 auto;}
#slider-with-blocks-1 {
  width: 100%;
}

.rsContent {
  color: #FFF;
  font-size: 24px;
  line-height: 32px;
  float: left;
}
.bContainer {
  position: relative;
}
.rsABlock {
  position: relative;
  display: block;
  left: auto;
  top: auto;
}
.blockHeadline {
  font-size: 42px;
  line-height: 50px;
}
.blockSubHeadline {
  font-size: 32px;
  line-height: 40px
}
.txtCent {
  text-align: center; 
  width: 100%; 
}

.slide1 {
  background: #f06b50;
}
.slide1 .bContainer {
  top: 36%;
}
.slide2 {
    background: #ffbc11;
    color:#000;
}
.slide2 .bContainer {
  top: 24px;
}
.slide2 .txtCent {
  line-height: 44px;
}
.slide2 .blockHeadline {
   line-height: 66px;
}
.slide3 {
    background: #45aab8;
    color:#FFF;
}
.slide3 .bContainer {
   top: 24px;
}
.slide3 span {
  line-height: 44px;
}
.slide4 .bContainer {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  top: 24px;
}

.photoCopy {
  position: absolute;
  line-height: 24px;
  font-size: 12px;
  background: black;
  color: white;
  background-color: rgba(0, 0, 0, 0.75);
  padding: 0px 10px;
  position: absolute;
  left: 12px;
  bottom: 12px;
  top: auto;
  border-radius: 2px;
  z-index: 25;
}
.photoCopy a {
  color: #FFF;
}
.palmImg {
  left: 0;
  top: auto;
  bottom: -60px;
  position: absolute;
}


@media screen and (min-width: 0px) and (max-width: 960px) { 
  .rsContent {
    font-size: 22px;
    line-height: 28px;
  }
  .blockHeadline {
    font-size: 32px;
    line-height: 32px;
  }
  .blockSubHeadline {
    font-size: 26px;
    line-height: 32px
  }
}
@media screen and (min-width: 0px) and (max-width: 500px) { 
  .royalSlider,
  .rsOverflow {
    height: 330px !important;
  }
  .rsContent {
    font-size: 18px;
    line-height: 26px;
  }
  .blockHeadline {
    font-size: 24px;
    line-height: 32px;
  }
  .blockSubHeadline {
    font-size: 22px;
    line-height: 32px
  }
}

    </style>
    
  </head>
  <body>

<div class="page wrapper main-wrapper">  

    
      <div id="royasliderbox" class="col span_4 fwImage">
            <div id="slider-with-blocks-1" class="royalSlider rsMinW  ">
              <div class="rsContent slide1">
                <div class="bContainer">
                  <strong class="rsABlock txtCent blockHeadline">This is an animated block</strong>
                  <span class="rsABlock txtCent" data-move-effect="none">you can place it on any type of slide</span>
                </div>
              </div>
              <div class="rsContent slide2">
                <div class="bContainer">
                  <strong class="rsABlock txtCent blockSubHeadline" data-move-effect="none">Transition Types</strong>
                  <span class="rsABlock txtCent" data-move-effect="top" >from top  ↓</span>
                  <span class="rsABlock txtCent" data-move-effect="bottom">from bottom ↑</span>
                  <span class="rsABlock txtCent" data-move-effect="left">from left →</span>
                  <span class="rsABlock txtCent" data-move-effect="right">from right ←</span>
                  <span class="rsABlock txtCent" data-move-effect="none">just fade</span>
                </div>
              </div>
              <div class="rsContent slide3">
                <div class="bContainer">
                  <strong class="rsABlock txtCent blockSubHeadline" data-move-effect="none"  data-delay="0">Customizable Animation</strong>
                  <span class="rsABlock txtCent" data-move-effect="left" data-delay="1000" data-move-offset="500" data-easing="easeOutBack"  data-fade-effect="none">easing</span>
                  <span class="rsABlock txtCent" data-move-effect="left" data-delay="1500" data-move-offset="500" data-fade-effect="none">delay</span>
                  <span class="rsABlock txtCent" data-move-effect="left" data-delay="2000" data-move-offset="500" data-speed="1000" data-fade-effect="none">speed</span>
                  <span class="rsABlock txtCent" data-move-effect="left" data-delay="2500" data-move-offset="50" data-fade-effect="true">move offset</span>
                </div>
              </div>
            
            </div>
      </div>
  

</div>


<script type="text/javascript">
      $(document).ready(function($) {
	 	 $.rsCSS3Easing.easeOutBack = 'cubic-bezier(0.175, 0.885, 0.320, 1.275)';
		  $('#slider-with-blocks-1').royalSlider({
			arrowsNav: true,
			arrowsNavAutoHide: false,
			fadeinLoadedSlide: false,
			controlNavigationSpacing: 0,
			controlNavigation: 'bullets',
			imageScaleMode: 'none',
			imageAlignCenter:false,
			blockLoop: true,
			loop: true,
			numImagesToPreload: 6,
			transitionType: 'fade',
			keyboardNavEnabled: true,
			block: {
			  delay: 400
			}
		  });
	});

</script>

</body></html>